import React from 'react';
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
import './App.css';
import { authApi } from './api';

// 懒加载组件
const AdminLayout = React.lazy(() => import('./admin/layouts/AdminLayout'));
const AdminLogin = React.lazy(() => import('./admin/pages/Login'));
const AdminDashboard = React.lazy(() => import('./admin/pages/Dashboard'));
const AdminUsers = React.lazy(() => import('./admin/pages/Users'));
const AdminBooks = React.lazy(() => import('./admin/pages/Books'));
const AdminOrders = React.lazy(() => import('./admin/pages/Orders'));

// 前台组件
const FrontLayout = React.lazy(() => import('./front/layouts/FrontLayout'));
const Home = React.lazy(() => import('./front/pages/Home'));
const Books = React.lazy(() => import('./front/pages/Books'));
const BookDetail = React.lazy(() => import('./front/pages/BookDetail'));
const Login = React.lazy(() => import('./front/pages/Login'));
const Register = React.lazy(() => import('./front/pages/Register'));
const Cart = React.lazy(() => import('./front/pages/Cart'));
const Orders = React.lazy(() => import('./front/pages/Orders'));
const Profile = React.lazy(() => import('./front/pages/Profile'));

// 加载中组件
const Loading = () => <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100vh' }}>加载中...</div>;

// 管理员路由保护组件
const AdminRoute = ({ children }) => {
  if (!authApi.isAuthenticated() || !authApi.isAdmin()) {
    return <Navigate to="/admin/login" />;
  }
  return children;
};

// 用户路由保护组件
const UserRoute = ({ children }) => {
  const location = useLocation();
  
  if (!authApi.isAuthenticated()) {
    return <Navigate to="/login" state={{ from: location }} replace />;
  }
  return children;
};

function App() {
  return (
    <Router>
      <React.Suspense fallback={<Loading />}>
        <Routes>
          {/* 前台路由 */}
          <Route path="/" element={<FrontLayout />}>
            <Route index element={<Home />} />
            <Route path="books" element={<Books />} />
            <Route path="books/:id" element={<BookDetail />} />
            <Route path="login" element={<Login />} />
            <Route path="register" element={<Register />} />
            <Route path="cart" element={
              <UserRoute>
                <Cart />
              </UserRoute>
            } />
            <Route path="orders" element={
              <UserRoute>
                <Orders />
              </UserRoute>
            } />
            <Route path="profile" element={
              <UserRoute>
                <Profile />
              </UserRoute>
            } />
          </Route>
          
          {/* 后台路由 */}
          <Route path="/admin/login" element={<AdminLogin />} />
          
          <Route 
            path="/admin" 
            element={
              <AdminRoute>
                <AdminLayout />
              </AdminRoute>
            }
          >
            <Route index element={<Navigate to="/admin/dashboard" />} />
            <Route path="dashboard" element={<AdminDashboard />} />
            <Route path="users" element={<AdminUsers />} />
            <Route path="books" element={<AdminBooks />} />
            <Route path="orders" element={<AdminOrders />} />
          </Route>
          
          {/* 404页面 */}
          <Route path="*" element={<div>404 页面不存在</div>} />
        </Routes>
      </React.Suspense>
    </Router>
  );
}

export default App;
